<template>
<div>
  <div class="title">热销推荐</div>
  <div class="item border-bottom" v-for="item of recommend" :key="item.id">
      <img class="imgs" :src=item.imgUrl>
    <div class="item-rg">
      <p class="rg-title">{{item.title}}</p>
      <p class="rg-dec">{{item.desc}}</p>
      <span class="delbtn">查看详情</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommend: Array
  },
  data () {
    return {

    }
  }

}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins';
.title
   line-height: .4rem
   padding:.16rem .2rem
   background: #eee
   font-size: .3rem
.item
  display: flex
  padding: .1rem
  .imgs
   height: 1.7rem
   width: 2.7rem
  .item-rg
   flex: 1
   padding: .12rem
   margin-left:.1rem
   min-width:0
   .rg-title
      font-size: .3rem
      font-weight: 500
      ellipsis()
   .rg-dec
      font-size: .24rem
      margin: .2rem 0 .4rem 0
      color:#aaa
      ellipsis()
   .delbtn
      color: #fff
      padding: .08rem
      border-radius: .06rem
      background:#ff9300
      cursor: pointer
</style>
